<template>
  <div class="chat-input">
    <div class="textarea-wrap">
      <el-input
        v-model="draft"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="输入消息，Enter 发送，Shift+Enter 换行"
        @keydown.enter.prevent="handleEnter"
        :disabled="disabled"
      />
      <div class="bottom-bar">
        <div class="left-tools">
          <el-button v-if="showReturn" class="return-btn" size="small" text @click="emitReturn">返回段落</el-button>
          <span class="hint">{{ chars }}/{{ limit }}</span>
        </div>
        <div class="right-tools">
          <div class="mode-switch" v-if="modeEnabled">
            <el-dropdown trigger="click" @command="handleModeCommand">
              <button class="mode-btn" type="button">
                <span class="mode-dot"></span>
                <span class="mode-text">{{ currentModeLabel }}</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="default">普通助手</el-dropdown-item>
                  <el-dropdown-item command="role:confucius">孔子</el-dropdown-item>
                  <el-dropdown-item command="role:laozi">老子</el-dropdown-item>
                  <el-dropdown-item command="role:libai">李白</el-dropdown-item>
                  <el-dropdown-item command="role:dufu">杜甫</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <button class="send-btn" :disabled="!canSend" @click="submit">
            <span v-if="!sending">发送</span>
            <span v-else class="sending-spinner"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  disabled: { type: Boolean, default: false },
  sending: { type: Boolean, default: false },
  limit: { type: Number, default: 2000 },
  showReturn: { type: Boolean, default: false },
  mode: { type: String, default: 'default' },
  modeEnabled: { type: Boolean, default: true }
})
const emit = defineEmits(['send','return','change-mode'])
const draft = ref('')
const chars = computed(() => draft.value.length)
const canSend = computed(()=> !!draft.value.trim() && !props.disabled && !props.sending )

const modeLabelMap = {
  default: '普通助手',
  'role:confucius': '孔子',
  'role:laozi': '老子',
  'role:libai': '李白',
  'role:dufu': '杜甫'
}
const currentModeLabel = computed(() => modeLabelMap[props.mode] || '普通助手')

function submit(){
  if (!canSend.value) return
  const content = draft.value
  draft.value = ''
  emit('send', content)
}
function handleEnter(e){
  if (e.shiftKey) { draft.value += '\n'; return }
  submit()
}
function emitReturn(){ emit('return') }
function handleModeCommand(command){
  if (command && command !== props.mode) {
    emit('change-mode', command)
  }
}
</script>
<style scoped>
.chat-input { padding:10px 12px 14px; display:flex; flex-direction:column; }
.textarea-wrap { position:relative; display:flex; flex-direction:column; gap:6px; }
.bottom-bar { display:flex; justify-content:space-between; align-items:center; padding:2px 4px 0; }
.left-tools { display:flex; align-items:center; gap:10px; font-size:12px; }
.right-tools { display:flex; align-items:center; gap:8px; }
.hint { font-size:12px; color:#8a7a68; letter-spacing:.5px; }
.return-btn { font-weight:600; background:transparent; color:#8a5e1f; padding:4px 10px; border-radius:14px; }
.return-btn:hover { background:rgba(205,160,90,0.12); }
.send-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; height:38px; font-size:15px; font-weight:600; letter-spacing:1px; border-radius:18px; border:1px solid #d2b075; cursor:pointer; background:linear-gradient(135deg,#cfa355,#e2c98a); color:#fff; box-shadow:0 4px 14px -4px rgba(150,110,40,.45); transition:.25s; }
.send-btn:hover:not(:disabled){ filter:brightness(1.07); box-shadow:0 6px 18px -4px rgba(150,110,40,.55); }
.send-btn:active:not(:disabled){ filter:brightness(.93); }
.send-btn:disabled { opacity:.55; cursor:default; box-shadow:none; }
.sending-spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
.mode-switch { display:flex; align-items:center; }
.mode-btn { display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:30px; border-radius:999px; border:1px solid rgba(200,170,120,0.7); background:rgba(255,255,255,0.96); cursor:pointer; font-size:12px; color:#7a5b34; box-shadow:0 2px 8px -4px rgba(0,0,0,0.18); }
.mode-btn:hover { background:#f7efe3; }
.mode-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#cfa355,#e2c98a); box-shadow:0 0 0 1px rgba(180,130,60,0.4); }
.mode-text { white-space:nowrap; }
@keyframes spin { to { transform:rotate(360deg); } }
/* 去除内部 textarea 边框与背景，统一外层视觉 */
:deep(.el-textarea) { background:transparent; }
:deep(.el-textarea__inner){ background:transparent !important; border:none !important; box-shadow:none !important; resize:none; padding:10px 4px 6px 4px; line-height:1.55; font-size:14px; }
:deep(.el-textarea__inner:focus){ outline:none; box-shadow:none; }
:deep(.el-textarea__inner::placeholder){ color:#b59d80; opacity:.75; }
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :deep(.el-textarea__inner){ color:#f2e6d7; }
  :deep(.el-textarea__inner::placeholder){ color:#c9b79f; opacity:.55; }
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .hint { color:#b9ac9c; }
  .return-btn { color:#e9d4b3; }
  .return-btn:hover { background:rgba(225,190,120,0.15); }
  .send-btn { border-color:#b78d48; background:linear-gradient(135deg,#b7853e,#d7b06d); box-shadow:0 4px 16px -4px rgba(90,60,20,.55); }
  .send-btn:hover:not(:disabled){ box-shadow:0 6px 22px -4px rgba(90,60,20,.65); }
}
</style>
